<!--
 * @Descripttion: 描述
 * @Author: 刘黎
 * @Date: 2024-06-27 19:40:48
 * @LastEditors: 刘黎
 * @LastEditTime: 2024-08-19 16:30:29
-->
<!-- 新增好友 -->
<template>
  <div class="apption">
    <!-- 标题 -->
    <div class="pageTitle">角色管理</div>
    <div class="topBox">
      <div class="searchTop">
        <div class="left">
          <el-form :inline="true" :model="prop" class="demo-form-inline" label-width="100px">
            <el-form-item label="角色名称:">
              <el-input v-model="prop.title" placeholder="请输入角色名称" />
            </el-form-item>
          </el-form>
        </div>
        <div class="right">
          <el-button type="primary" @click="init">查询</el-button>
          <el-button type="primary" @click="resetClick">重置</el-button>
          <el-button type="success" @click="addClick">新增</el-button>
        </div>
      </div>
    </div>
    <div class="tableClass">
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="title" label="角色名称" />
        <el-table-column prop="remark" label="岗位描述" />
        <el-table-column label="状态">
          <template #default="scope">
            <!-- <template v-if="scope.row.status==0">待直播</template> -->
            <template v-if="scope.row.status==1">禁用</template>
            <template v-if="scope.row.status==2">启用</template>
          </template>
        </el-table-column>
        <el-table-column prop="create_admin" label="创建人" />
        <el-table-column label="创建时间 ">
          <template #default="scope">
            {{ scope.row.create_time }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template #default="scope">
            <el-button type="danger" size="small" @click="deleteClick(scope.row)">删除</el-button>
            <el-button type="primary" size="small" @click="editClick(scope.row)">编辑</el-button>
            <el-button type="success" size="small" @click="limitsClick(scope.row)">权限分配</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="timedPagination">
      <el-pagination
        v-model:current-page="prop.page"
        v-model:page-size="prop.pageSize"
        :total="prop.total"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- 新增or编辑分类 -->
    <el-dialog
      v-model="dialogVisible"
      width="600"
      :before-close="dialogClose"
      title="新增角色"
      top="3vh"
    >
      <div class="dialogContent">
        
        <el-form :model="addPropForm" label-width="auto">
          <el-form-item label="角色名称:">
            <el-input v-model="addPropForm.title" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="角色描述:">
            <el-input v-model="addPropForm.remark" type="textarea" placeholder="请输入内容描述" />
          </el-form-item>
          <el-form-item label="角色状态:">
            <el-select v-model="addPropForm.status" clearable placeholder="请选择">
              <el-option
                label="禁用"
                value="1"/>
              <el-option
                label="启用"
                value="2"/>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="loading" type="primary" @click="saveFun()">保存</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 获取菜单分配权限 -->
    <el-dialog
      v-model="limitsDialogVisible"
      width="600"
      :before-close="dialogClose"
      title="权限分配"
      top="3vh"
    >
      <div class="dialogContent">
        <!-- <el-table ref="tableRef" :data="limitsTableData" v-loading="loading" border
          row-key="id"
          :lazy="true"
          :load="loadTableFun"
          style="width: 100%">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="title" label="内容名称" />
          <el-table-column prop="remark" label="内容描述" />
          <el-table-column label="状态">
            <template #default="scope">
              <template v-if="scope.row.status==1">启用</template>
              <template v-if="scope.row.status==2">停用</template>
            </template>
          </el-table-column>
          <el-table-column prop="create_admin" label="创建人" />
          <el-table-column label="创建时间 ">
            <template #default="scope">
              {{ scope.row.create_time }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-checkbox v-model="scope.row.isCheck" label="Option 1" size="large">权限释放</el-checkbox>
            </template>
          </el-table-column>
        </el-table> -->
        <el-tree
          ref="treeRef"
          style="max-width: 600px"
          :data="limitsTableData"
          show-checkbox
          :default-expand-all="true"
          :default-checked-keys="node_ids"
          node-key="id"
          :props="defaultProps"
        />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="loading" type="primary" @click="limitsSaveFun()">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { computed,ref,onMounted } from 'vue'
import { useChatInfoStore, useJobIDStore } from '@/store/index.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import { postApi } from "@/api/api.js"
import elUploadOptionMultiple from '@/components/elUploadOptionMultiple.vue';
import moment from 'moment'
let prop = ref({
  status: '',
  title: '',
  create_time: '',
  create_admin: '',
  page: 1,
  limit: 10,
  total: 0
})
let loading = ref(false)
let tableData = ref([])

// init初始化查询
function init() {
  loading.value = true
  let obj = {
    // status: prop.value.status,
    title: prop.value.title,
    page: prop.value.page,
    limit: prop.value.limit
  }
  postApi('/system.auth/index', obj).then(res => {
    loading.value = false
    tableData.value = res.data
    prop.value.total = res.count
  }).catch(err => {
    loading.value = false
  })
}
function resetClick() { // 重置
  prop.value = {
    status: '',
    title: '',
    create_time: '',
    create_admin: '',
    page: 1,
    limit: 10,
    total: 0
  }
  init()
}
function handleCurrentChange(val){
  prop.value.page = val
  init()
}

// 新增直播
let dialogVisible = ref(false)
let addPropForm = ref({
  goods_id: '',
  id: '',
  title: '',
  remark: '',
  images: [],
  sort: '',
  status: '',
  anchor: '',
  live_date: '',
  live_url: ''
})

function addClick() {
  dialogVisible.value = true
  addPropForm.value = {
    goods_id: '',
    id: '',
    title: '',
    remark: '',
    images: [],
    sort: '',
    status: '',
    anchor: '',
    live_date: '',
    live_url: ''
  }
}
function editClick(row) {
  dialogVisible.value = true
  let imagesTemp = []
  if(row.img){
    row.img.split(",").forEach(element => {
      imagesTemp.push({
        url: element
      })
    })
  }
  addPropForm.value = {
    id: row.id,
    goods_id: row.goods_id,
    title: row.title,
    remark: row.remark,
    images: imagesTemp,
    status: row.status + '',
    anchor: row.anchor,
    live_date: row.live_date,
    live_url: row.live_url
  }
}
function deleteClick(row) {
  ElMessageBox.confirm('确定要删除该条数据吗？','删除').then(() => {
    postApi('/system.auth/delete', { id:row.id }).then(res => {
      if(res.code === 1){
        ElMessage({
          message: "操作成功",
          type: 'success'
        })
        init()
      }
    })
  })
}
// 上传图片回传函数
function getImagesFun(row) {
  console.log(row)
  addPropForm.value.images = row
}
// 保存
function saveFun() {
  loading.value = true
  if(addPropForm.value.id){
    let obj = {
      id: addPropForm.value.id,
      title: addPropForm.value.title,
      remark: addPropForm.value.remark,
      status: addPropForm.value.status
    }
    console.log(obj)
    postApi('/system.auth/edit', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        init()
        dialogVisible.value = false
      }
    }).catch(err => {
      loading.value = false
    })
  }else{
    let obj = {
      title: addPropForm.value.title,
      remark: addPropForm.value.remark,
      status: addPropForm.value.status
    }
    console.log(obj)
    postApi('/system.auth/add', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        init()
        dialogVisible.value = false
      }
    }).catch(err => {
      loading.value = false
    })
  }
}

// 分配权限
let limitsDialogVisible = ref(false)
let limitsTableData = ref([])
let treeRef = ref(null)
let roleId = ref('')
let node_ids = ref([])
const defaultProps = {
  children: 'children',
  label: 'title',
}
function limitsClick(row) {
  limitsDialogVisible.value = true
  roleId.value = row.id
  postApi('/system.menu/index',{pid: 0}).then(res => {
    loading.value = false
    limitsTableData.value = res.data
    res.data.forEach(el =>{
      if (el.children.length > 0) {
        //判断是否是子节点 过滤掉父节点 避免父节点下面的字节点全部选中
        row.node_ids.forEach((node,j) =>{
          if(el.id == node){
            row.node_ids.splice(j, 1)
          }
        })
      }
    })
    console.log(row.node_ids)
    node_ids.value = row.node_ids
  }).catch(err => {
    loading.value = false
  })
}
function limitsSaveFun() {
  console.log(treeRef.value.getCheckedNodes(false, true))
  // 获取所有选中的节点，包括半选中的节点
  const checkedNodes = treeRef.value.getCheckedNodes(false, true);
  const checkedValues = checkedNodes.map(node => node.id);
  console.log(checkedValues);
  postApi('/system.auth/saveAuthorize', {
    id: roleId.value,
    node: checkedValues
  }).then(res => {
    if(res.code === 1){
      ElMessage({message: "操作成功",type: 'success'})
      init()
      limitsDialogVisible.value = false
    }
  }).catch(err => {
    loading.value = false
  })
}
// 关闭弹框
function dialogClose(params) {
  dialogVisible.value = false
  limitsDialogVisible.value = false
}

onMounted(()=>{
  init()
})
</script>

<style lang="scss" scoped>
.apption{
  padding: 20px;
  height: 100vh;
  .tableClass{
    margin-bottom: 20px;
  }
}
</style>
